<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>


<script type="text/javascript" src="js/jquery.itextclear.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
    });
</script>
<!-- jQplot CSS -->

<link rel="stylesheet" media="screen" href="${ctx}/css/Tree.css"/>
<!-- jQplot CSS END -->

<!-- DATATABLES CSS -->
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css"/>
<script type="text/javascript" src="lib/datatables/js/jquery.dataTables.js"></script>

<!-- DATATABLES CSS END -->

<h1 class="page-title">协助部门管理</h1>

<div class="container_12 clearfix leading">

    <%@ include file="/WEB-INF/pages/common/common_tree.jsp"%>

    <div class="tabs side grid_8 leading"  style="margin-top:0px">

        <div class="container_12 clearfix leading"  style="margin-top:0px;">
            <div class="portlet grid_12 leading docs" style=" margin-bottom:20px">
                <header>
                    <h2>协助内容</h2>
                </header>
                <section>
                    <div class="form-input">
                        <textarea style="width:100%" name="form-name2" required="required" id="help_content_add" placeholder="请输入协助内容">${department.content}</textarea>
                    </div>
                    <div class="clear"></div>
                </section>
            </div>
            <div class="form-action clearfix" >
                <p  style=" padding-left:10px">
                    <a class="button" href="javascript:void(0)" onclick="onAdd()"> <span style="background:url(${ctx}/images/img/arrow_down.png)" class="icon">&nbsp;</span>添加</a>
                </p>
            </div>
        </div>

        <div class="tabs side grid_12 leading" id="choice_department_div" style="display: none;">
            <ul class="clearfix" id="tab_ul">
                <%--<li><a href="javascript:void(0)" onclick="tab_onclick()">开发部</a></li>--%>
            </ul>
            <section>
                <section class="clearfix">
                    <span class="form-input">
                        <textarea name="form-name" rows="5" required="required" id="help_content_edit" style="width:100%" placeholder="请输入协助内容"></textarea>
                    </span>

                    <div class="tabs side grid_12 leading">
                        <div class="clear"></div>
                        <div class="grid_12">
                            <div class="form-action clearfix">
                                <p>
                                    <input type="hidden" id="current_organization_id"/>
                                    <input type="hidden" id="current_organization_name"/>
                                    <a class="button" href="javascript:void(0)" onclick="onEditDepartment()"><span style="background:url(${ctx}/images/img/page_edit.png)" class="icon">&nbsp;</span>修改</a>
                                    <a class="button" href="javascript:void(0)" id="delete_btn" onclick="deleteDepartment()"><span style="background:url(${ctx}/images/img/delete.png)" class="icon">&nbsp;</span>删除</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
        </div>
        <div class="container_12 clearfix leading" style="margin-top:0px"></div>
    </div>

    <div class="grid_12" style="padding-top: 20px;">
        <div class="form-action clearfix">
            <p>
                <a class="button" href="javascript:void(0)" onclick="onChoiceBack(true)"><span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>确定提交</a>
                <a class="button" href="javascript:void(0)" onclick="onChoiceBack(false)"><span style="background:url(${ctx}/images/img/cancel.png)" class="icon">&nbsp;</span>取消</a>
            </p>
        </div>
    </div>
</div>

<form name="data_form" id="data_form" method="post">
<div id="data_cache_div"></div>
</form>

<div class="clear"></div>


<script type="text/javascript" src="${ctx}/js/Tree.js"></script>
<script type="text/javascript" src="${ctx}/js/global_util.js"></script>
<script type="text/javascript">
    //findDuty()为common_tree.jsp中的方法，点击树结点调用此方法
    function findDuty(organizationId){
        findOrganization(organizationId)
    }
    function findOrganization(organizationId){
        var url = "${ctx}/ajax/organization-current.xhtml";
        $.ajax(url, {
            type: "POST",
            data: {"parentId":organizationId},
            dataType:"json",
            cache:false,
            success:function(organization) {
                if(organization != null){
                    $("#current_organization_id").val(organization.id);
                    $("#current_organization_name").val(organization.fullName);
                }else{
                    $("#current_organization_id").val("");
                    $("#current_organization_name").val("");
                }
            },
            complete:function() {}
        });
    }

    //添加到下面的tab列表中
    function onAdd(){
        var organizationId = $("#current_organization_id").val();
        var organizationName = $("#current_organization_name").val();
        var content = $("#help_content_add").val();
        if(checkNull(content)){
            alert("请输入协助内容")
            return;
        }
        if($("#tab_o_"+organizationId).length > 0){
            alert("该协助部门已存在");
            return;
        }
        var temp = '<li><a href="javascript:void(0)" onclick="tab_onclick('+organizationId+')" id="tab_o_'+organizationId+'">'+organizationName+'</a></li>';
        $("#tab_ul").append(temp);
        var isFirst = ($("#data_cache_div").children("input").length == 0);
        $("#data_cache_div").append('<input type="hidden" id="o_id_'+organizationId+'" org_name="'+organizationName+'" name="help_department" value="'+content+'"/>');
        if(isFirst){
            tab_onclick(organizationId);
            $("#choice_department_div").show();
        }
        $("#help_content_add").val("");
    }


    //点击树结点
    function findHelpDepartmentByOrganization222(organizationId){
        $("#organization_id").val(organizationId);

        var url = "${ctx}/rank/help-department-find.xhtml";
        $.ajax(url, {
            type: "POST",
            data: {"organizationId":organizationId},
            dataType:"json",
            cache:false,
            success:function(department) {
                if(department == null || department.id == null){
                    $("#help_content_add").val("");
                    $("#current_organization_id").val(department.organization.id);
                    $("#current_organization_name").val(department.organization.fullName);
                }else{
                    $("#current_organization_id").val(department.organization.id);
                    $("#current_organization_name").val(department.organization.fullName);
                    $("#current_department_id").val(department.id);
                    $("#help_content_add").val(department.content);
                }
            },
            complete:function() {}
        });
    }

    //点击tab
    function tab_onclick(organizationId){
        $("#tab_ul").find("a").removeClass("current");
        $("#tab_o_"+organizationId).addClass("current");

        findHelpDepartmentByOrganization(organizationId);
    }

    function findHelpDepartmentByOrganization(organizationId){
        $("#help_content_edit").val($("#o_id_"+organizationId).val());
    }

    function onEditDepartment(){
        var current_tab_id = $("#tab_ul").find("a.current").attr("id");
        var oid = current_tab_id.substr("tab_o_".length, current_tab_id.length);
        $("#o_id_"+oid).val($("#help_content_edit").val());
        alert("修改成功")
    }
    //删除
    function deleteDepartment(){
        if(!confirm("确定要删除该数据吗?")){
            return;
        }
        var current_tab_id = $("#tab_ul").find("a.current").attr("id");
        $("#"+current_tab_id).remove();
        $("#help_content_edit").val("");
        var oid = current_tab_id.substr("tab_o_".length, current_tab_id.length);
        $("#o_id_"+oid).remove();

        //删除当前tab后，设置第一个为current
        var firstElA = $("#tab_ul li:first").find("a");
        $(firstElA).addClass("current");

        if($("#tab_ul li").length == 0){
            $("#choice_department_div").hide();
        }
    }


    function onChoiceBack(isChoice){
        if(isChoice){
            if($("#data_cache_div").children("input").length == 0){
                alert("请选择已添加的协助部门")
                return;
            }

            $("#data_cache_div").find("input").each(function(){
                var content = $(this).val();
                var id = $(this).attr("id");
                var organizationId = id.substr("o_id_".length, id.length);
                var organizationName = $(this).attr("org_name");
                $(this).val(organizationId+"-"+organizationName+"-"+content);
            });
            back();
        }else{
            back();
        }
    }

    function back(){
        var url = "${ctx}/ajax/help-department-save.xhtml";
        $.ajax(url, {
            type: "POST",
            data: $("#data_form").serialize(),
            dataType:"json",
            cache:false,
            success:function(result) {
                window.location.href = "#${type==1?"sign":"public"}/administration-evection-apply-form-input.xhtml?choice=true"
            },
            complete:function() {}
        });


    }
</script>

    